{% extends 'base.html' %}

{% block head_title %}New password{% endblock head_title %}

{% block content %}
<div class="container">
  <div class="row">
    <div class="col-12">
      <h2 class=" my-5">Change password</h2>
      {% if validlink %}
      <div class="row">
        <form class="col-4" method="post">
          {% csrf_token %}
          <div class="form-group">
            {{ form.new_password1.label_tag }}
            <input type="password" class="form-control {% if form.new_password1.errors %}is-invalid{% endif %}"
              id="id_new_password1" name="new_password1" value='{{ form.new_password1.value|default:"" }}'>
            {% if form.new_password1.errors %}
            <div class="invalid-feedback">{{ form.new_password1.errors }}</div>
            {% endif %}
          </div>

          <div class="form-group">
            {{ form.new_password2.label_tag }}
            <input type="password" class="form-control {% if form.new_password2.errors %}is-invalid{% endif %}"
              id="id_new_password2" name="new_password2" value='{{ form.new_password2.value|default:"" }}'>
            {% if form.new_password2.errors %}
            <div class="invalid-feedback">{{ form.new_password2.errors }}</div>
            {% endif %}
          </div>
          <button type="submit" class="btn btn-primary">Change password</button>
        </form>
      </div>
      {% else %}
      <p>
        The password reset link was not valid, possibly because it has already been used,
        please request a <a href="{% url 'users:password_reset' %}">new password reset.</a>
      </p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock content %}